import React, {useRef} from 'react';
import {Flex} from "antd";
import {requestGet} from "util/request";
import LogFactory from 'log/LogFactory';
import {Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";
import DrawerEnhance from "common/drawer/DrawerEnhance";
import {MATHEMATICAL_PRECISION} from "constant/Common";
import SelectMonth from "common/select/SelectMonth";

const log = LogFactory.getLog("ConsumeChartComponent");

interface ChartData {
    name: string,
    totalMoney: number
}

const ConsumeChartComponent = () => {
    const [sumTotal, setSumTotal] = React.useState<number>(0) ;
    const [data, setData] = React.useState<ChartData[]>([]) ;
    const currentMonth = useRef<number>(new Date().getMonth() + 1) ;
    const currentYear = useRef<number>(new Date().getFullYear()) ;

    const updateChartData = async (month: number) => {
        requestGet<ChartData[]>(`/record/consume/gather/${currentYear.current}/${month}`)
            .then(res => {
                log.request("res",res);
                if (res.success){
                    let sum = res.data.reduce((pre,cur,) => pre + cur.totalMoney * MATHEMATICAL_PRECISION,0) ;
                    setSumTotal(sum / MATHEMATICAL_PRECISION) ;
                    setData(res.data);
                }
            }) ;
    } ;

    const monthSelect = async (value: number) => {
        currentMonth.current = value ;
       await updateChartData(value) ;
    } ;

    const afterOpenChange = async () => {
       await updateChartData(currentMonth.current) ;
    } ;

    return (
        <DrawerEnhance
            title={"消费统计"}
            size={"large"}
            afterOpenChange={afterOpenChange}
        >
            <h4 style={{textAlign: "center", fontSize: "20px"}}>{currentYear.current}年{currentMonth.current}月消费统计</h4>

            <Flex justify={"space-between"} style={{margin: "20px 20px"}}>
                <summary
                style={{
                    fontWeight: "bold",
                    paddingInline: "10px",
                    textAlign: "center",
                    lineHeight: "31px",
                    borderRadius: "5px",
                    backgroundColor: "#c26565"
                }}
                >合计金额: {sumTotal} ¥</summary>
                <SelectMonth changeMonth={monthSelect} defaultMonth={currentMonth.current}/>
            </Flex>

            <ResponsiveContainer width={"100%"} height={"80%"}>
                <BarChart data={data}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="name" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Bar unit={"元"} barSize={50} name={"本月总额"} label={{fill: "#d2c6b8"}} dataKey="totalMoney" fill={"#8884d8"} />
                    {/*<Bar dataKey="uv" fill="#82ca9d" />*/}
                </BarChart>
            </ResponsiveContainer>
        </DrawerEnhance>
    );
};

export default ConsumeChartComponent;